<!DOCTYPE html>
<html>
<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
<link rel="stylesheet" href="../../static/css/bootstrap-table.min.css">
<head>
<meta charset="utf-8">
<title>结果</title>
<script src="../../static/webJS/jquery-3.6.0.min.js"></script>
<script src="../../static/webJS/bootstrap.min.js"></script>
<script src="../../static/webJS/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
     $("#table_page").bootstrapTable({
        striped:true,
        pageNumber:1,
        pagination : true,

        sidePagination : 'client',
        pageSize : 25,
        columns:[{
            field:'name',
            title:'网站名称'
        },{
            field:'job',
            title:'公司类型'
        },{
            field:'work',
            title:'职业名称'
        },{
            field:'place',
            title:'地区'
        },{
            field:'salary',
            title:'薪资'
        },{
            field:'company',
            title:'经验'
        },{
            field:'school',
            title:'文凭'
        },{
            field:'workplace',
            title:'公司(点击查看详情)'
        },]
     });
});
</script>
<style>
body {
    margin: 0;
}

u {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 设置导航栏的搜索框样式 */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

/* 当屏幕宽度小于 600px 时，垂直堆叠显示菜单选项和搜索框 */
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}
table{
   	width:100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 阴影 */
    border-collapse:collapse;/* 取消表格边框 */
    letter-spacing:1px;/* 文字缩进 */
}
table,th,tr,td{
    border-bottom:1px solid #dedede;/* 表格横线 */
    padding:29px;
    text-align: center;
}
select {
  width: 80%;
  padding: 10px 15px;
  border: 1;
  border-radius: 4px;
  background-color: #f1f1f1;
}
.button {
    width: 45%;
    background-color: black;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
}
</style>
</head>
<body>
<div class="topnav">
  <a class="active" href="spider?code=3">主页</a>
  <a href="chart">数据分析</a>
  <form action="spider?code=4" method="post">
  <input type="text" name="name" placeholder="搜索..">
  </form>

</div>
<u>
<form method="POST" action="spider?code=2">
  <h3>&nbsp学历要求</h3>
  <select id="education" name="education" style="font-size: 20px">
  <option value="all">所有</option>
  <option value="junior">初中及以下</option>
  <option value="high">高中</option>
  <option value="college">大专</option>
  <option value="university">本科</option>
  <option value="master">硕士</option>
  <option value="docter">博士</option>
  <option value="nothing">无学历要求</option>
  </select>
  <h3>&nbsp工作经验</h3>
  <select id="experience" name="experience" style="font-size: 20px">
  <option value="all">所有</option>
  <option value="1-2">1-2年</option>
  <option value="1-3">1-3年</option>
  <option value="2-5">2-5年</option>
  <option value="3-4">3-4年</option>
  <option value="5-7">5-7年</option>
  <option value="5-8">5-8年</option>
  <option value="8-12">8-12年</option>
  <option value="12-20">12-20年</option>
  <option value="over">20年以上</option>
  <option value="nolimit">经验不限</option>
  </select>
  <h3>&nbsp月薪范围</h3>
  <select id="salary" name="salary" style="font-size: 20px">
  <option value="all">所有</option>
  <option value="0-2">2k以下</option>
  <option value="2-3">2k-3k</option>
  <option value="3-6">3k-6k</option>
  <option value="6-9">6k-9k</option>
  <option value="9">9k以上</option>
  </select>
  <p></p>
  <input type = "submit" class = "button"  value = "查询" >
  <input type = "reset" class = "button"  value = "重置" >
</form>
</u>
<div style="margin-left:15%;padding:1px 16px;height:1000px;">
  <table id="table_page">
      {%for i in ls%}
	<tr>
        <td>{{i[1]}}</td>
        <td>{{i[10]}}</td>
        <td>{{i[3]}}</td>
        <td>{{i[8]}}</td>
        <td>{{i[5]}}k-{{i[4]}}k</td>
		<td>{{i[7]}}</td>
		<td>{{i[6]}}</td>
        <td><a href={{i[2]}} target="_blank">{{i[9]}}</a></td>
    </tr>
{%endfor%}
</table>
</div>

</body>
</html>